<template>
  <div>
    <Row>
      <div class="toolbar">
        <div>
          <Button
            type="primary"
            icon="md-add"
            style="margin-right: 10px"
            @click="editItem()"
            v-if="Validation.check(Resources.INFO_ADD)"
            >新增资讯
          </Button>
        </div>
        <Input
          placeholder="资讯标题"
          v-model="bloc.form.title"
          style="width: 180px; margin-right: 10px"
        />
        <CompanySelector
          style="width: 300px; margin-right: 10px"
          :tagCount="100"
          :companyId="bloc.form.companyId"
          @on-change="(value) => (bloc.form.companyId = value)"
          v-if="Validation.isRootCompany"
        ></CompanySelector>
        <Button
          type="primary"
          icon="ios-search"
          style="margin: 0 10px"
          size="default"
          @click="bloc.search()"
          >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
          >重置</Button
        >
      </div>
    </Row>
    <i-table
      border
      :loading="bloc.loading"
      :columns="columns"
      highlight-row
      :data="bloc.paged.items"
    >
      <template slot-scope="{ row }" slot="action">
        <div style="white-space: nowrap">
          <Button
            size="small"
            @click="editItem(row)"
            type="info"
            v-if="Validation.check(Resources.INFO_UPDATE)"
            >修改
          </Button>
          <Button
            size="small"
            @click="removeItem(row)"
            type="warning"
            v-if="Validation.check(Resources.INFO_DELETE)"
            >删除
          </Button>
        </div>
      </template>
      <template slot-scope="{ row }" slot="switch">
        <i-switch
          v-model="row.enable"
          @on-change="bloc.modifyEnable(row)"
        ></i-switch>
      </template>
      <slot name="footer" slot="footer">
        <Page
          show-elevator
          show-total
          show-sizer
          :total="bloc.paged.itemCount"
          :current="bloc.paged.pageIndex"
          :page-size="bloc.paged.pageSize"
          :page-size-opts="[15, 30, 50, 100]"
          @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
          @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
        />
      </slot>
    </i-table>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { Route } from "vue-router";
import { SortBloc } from "@/view/info/bloc/SortBloc";
import { Info } from "@/base/model/Info";
import { formatDate } from "@/base/util/Dates";
import CompanySelector from "@/component/CompanySelector.vue";
import { Validation } from "@/base/Validation";
import { Resources } from "@/base/Resources";
import { isEmpty } from "@/base/util/Strings";

const getColumns = (bloc: SortBloc) => [
  {
    title: "ID",
    key: "id",
    align: "left",
    width: 160,
    tooltip: true,
  },
  {
    title: "所属品牌商",
    render: (h: any, params: any) => {
      return h("span", {
        domProps: {
          innerText: bloc.getCompanyName(params.row.companyId),
        },
      });
    },
    width: 250,
    align: "left",
    tooltip: true,
  },
  {
    title: "标题",
    key: "title",
    align: "left",
    tooltip: true,
  },
  {
    title: "是否显示",
    slot: "switch",
    width: 80,
    align: "left",
    tooltip: true,
  },
  {
    title: "发布时间",
    render: (h: any, params: any) => {
      return h("span", {
        domProps: {
          innerText: formatDate(
            new Date(params.row.created),
            "yyyy-MM-dd hh:mm:ss"
          ),
        },
      });
    },
    width: 160,
    align: "left",
    tooltip: true,
  },
  {
    title: "操作",
    slot: "action",
    width: 47 * 2 + 61 * 0 + 75 * 0 + 20,
    align: "left",
    fixed: "right",
  },
];

@Component({ components: { CompanySelector } })
export default class extends Vue {
  Validation = Validation;
  Resources = Resources;

  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next((vm) => {
      vm.bloc.sortId =
        isEmpty(vm.$route.query) || isEmpty(vm.$route.query.sortId)
          ? 0
          : Number(vm.$route.query.sortId);
      vm.bloc
        .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
        .catch((e) => {
          vm.$Message.error("操作错误");
        });
    });
  }

  bloc: SortBloc = new SortBloc();

  columns = getColumns(this.bloc);

  removeItem(dataItem: Info) {
    this.$Modal.confirm({
      title: "提示",
      content: "确认删除后将无法恢复！还要继续吗？",
      okText: "删除",
      cancelText: "取消",
      onOk: () => {
        this.bloc
          .removeItem(dataItem)
          .then((value) => {
            this.bloc.load(1, 15);
          })
          .then(() => {
            this.$Message.success("删除成功");
          })
          .catch((e) => {
            this.$Message.error("删除失败");
          });
      },
    });
  }

  editItem(dataItem: Info | null) {
    const id = this.bloc.sortId + "";
    dataItem
      ? this.$router.push({
          path: `/info/${dataItem.id}`,
          query: { sortId: id },
        })
      : this.$router.push({ path: "/info/add", query: { sortId: id } });
  }

  @Watch("$route")
  routechange(to: any, from: any) {
    const vm = this;
    vm.bloc.sortId =
      isEmpty(vm.$route.query) || isEmpty(vm.$route.query.sortId)
        ? 0
        : Number(vm.$route.query.sortId);
    vm.bloc.load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize);
    vm.bloc.reset();
  }
}
</script>
<style lang="less" scoped>
.info-sort {
  width: 100%;
  height: 100%;
  padding: 40px 20px;
}
</style>
